<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="span"></span> 商品管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="cardName" placeholder="商品名称"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="memberName" placeholder="商品编号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="selectValue"
          placeholder="选择供应商"
          @click.native="suppList"
        ></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="searchlist()">查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="resetList">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <el-table :data="shopListData" border style="width: 100%">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="code" label="商品编码"></el-table-column>
      <el-table-column prop="spec" label="商品规格"></el-table-column>
      <el-table-column prop="purchasePrice" label="零售价"></el-table-column>
      <el-table-column prop="retailPrice" label="进货价"></el-table-column>
      <el-table-column prop="storageNum" label="库存数量"></el-table-column>
      <el-table-column prop="address" label="供应商 "></el-table-column>
      <el-table-column label="操作 " width="180">
        <template scope="scope">
          <el-button size="mini" @click="shopEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="open" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="getNowpage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.paramUser.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="shopData.length"
    ></el-pagination>

    <!-- 新增表单的弹出框 -->
    <el-dialog title="收货地址" :visible.sync="dialogVisible" width="450px">
      <el-form :model="shopData" :rules="rules" style="width: 400px">
        <el-form-item label="商品名称">
          <el-input v-model="shopData.name"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="shopData.code"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="shopData.spec"></el-input>
        </el-form-item>
        <el-form-item label="零售价">
          <el-input v-model="shopData.purchasePrice"></el-input>
        </el-form-item>
        <el-form-item label="进货价">
          <el-input v-model="shopData.retailPrice"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input v-model="shopData.storageNum"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input
            placeholder="选择供应商"
            @click.native="suppList"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 供应商的弹出框 -->
    <el-dialog title="选择供应商" :visible.sync="opensuppList">
      <el-form :model="shopData" :rules="rules">
        <el-row :span="20">
          <el-col :span="6">
            <el-input v-model="cardName" placeholder="商品名称"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="searchGain">查询</el-button>
          </el-col>
        </el-row>
         <el-table :data="shopData" height="250" border style="width: 100%">
                       <template v-slot="scope">
                              <el-table-column
              prop="id"
              label="序号"
              width="60"
              class="tablecloumn"
              > </el-table-column
            >
                        <el-table-column
              prop="name"
              label="供应商名称"
              @click.native="gainData(scope.row)"
              > </el-table-column
            >
                        <el-table-column prop="username" label="联系人"
              > </el-table-column
            >
                        </template
          >
                    </el-table
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="opensuppList = false">取 消</el-button>
        <el-button type="primary" @click="searlist">确 定</el-button>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="getNowpage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.paramUser.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="shopData.length"
      ></el-pagination>
    </el-dialog>

    <!-- 编辑的弹出框 -->
    <el-dialog title="收货地址" :visible.sync="openEdit">
      <el-form :model="editData" :rules="rules">
        <el-form-item label="商品名称">
          <el-input v-model="editData.name"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="editData.code"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="editData.spec"></el-input>
        </el-form-item>
        <el-form-item label="零售价">
          <el-input v-model="editData.purchasePrice"></el-input>
        </el-form-item>
        <el-form-item label="进货价">
          <el-input v-model="editData.retailPrice"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input v-model="editData.storageNum"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input
            placeholder="选择供应商"
            @click.native="suppList"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openEdit = false">取 消</el-button>
        <el-button type="primary" @click="openEdit = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import mock from "../../mock.js"
import shopsApi from "@/api/goods.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      editData: [], //编辑

      openEdit: false, //编辑的
      dialogVisible: false, //添加的弹出框的显示和隐藏
      cardName: "", //商品名称
      memberName: "", //会员姓名
      selectValue: "", //支付类型
      opensuppList: false, //供应商弹出框
      dateValue: "", //日期
      shopData: [], //列表数据
      shopListData: [],
      paramUser: {
        pagenum: 1,
        pagesize: 10,
      }, //用户列表参数配置

      rules: {
        //正则
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        purchasePrice: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 1, max: 16, message: "请输入正确的邮箱", trigger: "blur" },
        ],
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取所有的数据
    getTableData() {
      shopsApi.getTableDataList().then((res) => {
        console.log(res);
        this.shopData = res.data.shopList;
        console.log(this.shopData);
        this.getNowpage(1);
      });
    },
    getNowpage(nowpage) {
      var start = (nowpage - 1) * this.paramUser.pagesize;
      var end = start + this.paramUser.pagesize; //所有数据
      // console.log(start, end);
      this.shopListData = this.shopData.slice(start, end); //当前页面的数据
      console.log(this.shopListData);
    },
    //搜索数据
    searchlist() {
      // var arr = [];
      // arr = this.shopData.filter((item, key) => {
      //   console.log(item, key);
      //   return item.name.includes(this.memberName);
      // });
      // console.log(arr);

      // this.shopListData = arr;
      // this.getNowpage(1);
      this.getTableData();
      this.cardName = "";
      this.memberName = "";
    },
    searlist() {
      this.getTableData();
      this.opensuppList = false;
    },
    resetList() {
      this.cardName = "";
      this.memberName = "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 删除
    async del() {
      // let { data: res } = await this.$http.get("member");
      // if (res.res.code != 200) {
      //   this.$message.error("删除失败");
      // } else {
      //   this.$message.success("删除成功");
      //   location.reload();
      // }
      this.getTableData();
      this.$message.success("删除成功");
    },
    // 删除
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    shopEdit(row) {
      this.openEdit = true;
      console.log(row);
      this.editData = row;
    },
    suppList() {
      this.opensuppList = true;
      this.dialogVisible = false;
    },
    searchGain() {
      this.getTableData();
    },
    //选择供应商
    gainData(row) {
      alert(1)
      console.log(row);
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableData();
    setTimeout(() => {
      this.getNowpage(1);
    }, 100);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.span {
  width: 5px;
  height: 4px !important;
  background: red;
  border: 1px solid red;
  margin-right: 10px;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-dialog {
  width: 500px;
}
</style>